<template>

	<view>
		<view v-if="page == 1" :class="twoClass">

			<view style="width: 80%; margin: 50rpx auto 0;">
				<input type="number" :value="phone" @input="changePhone" placeholder-style="color: #9EABB2;" style="color: #708090; width: 80%; margin-top: 20rpx; font-size: 35rpx;"
				 maxlength="18" placeholder="请输入手机号" />
				<view style="width: 100%;  height: 1px; background: #9EABB2; margin-top: 20rpx;"></view>
			</view>

			<view style="width: 80%; margin: 50rpx auto 0;">
				<input placeholder-style="color: #9EABB2;" style="color: #708090; width: 80%; margin-top: 0rpx; font-size: 35rpx;"
				 @input="changePass" :password="true" maxlength="18" placeholder="请输入密码" />
				<view style="width: 100%;  height: 1px; background: #9EABB2; margin-top: 20rpx;"></view>
			</view>

			<view style="width: 80%; margin: 50rpx auto 0;">
				<input placeholder-style="color: #9EABB2;" style="color: #708090; width: 80%; margin-top: 0rpx; font-size: 35rpx;"
				 @input="changeOkPass" :password="true" maxlength="18" placeholder="确认密码" />
				<view style="width: 100%;  height: 1px; background: #9EABB2; margin-top: 20rpx;"></view>
			</view>

			<view style="width: 80%; margin: 50rpx auto 0;">
				<picker style="width: 100%;" @change="changeContent" :value="index" :range="content" range-key="name">
					<view style="font-size: 35rpx; width: 100%; color: #708090; ">{{content[index].name}}</view>
				</picker>
				<view style="width: 100%;  height: 1px; background: #9EABB2; margin-top: 20rpx;"></view>
			</view>

			<view style="display: flex;">
				<view @tap="toNext" style="transform: rotate(225deg);" class="button">
					<icon style="line-height: 130rpx; font-size: 40rpx; transform: rotate(-45deg); color: #FFFFFF; font-weight: 1000;"
					 class="icon-jiantou iconfont"></icon>
				</view>

				<view @tap="register()" class="button">
					<icon style="line-height: 130rpx; font-size: 40rpx; transform: rotate(-45deg); color: #FFFFFF; font-weight: 1000;"
					 class="icon-jiantou iconfont"></icon>
				</view>
			</view>

		</view>

		<view v-else :class="oneClass">
			<view v-if="identitySrc == ''" @tap="chooseIdentity" style="display: flex; text-align: center; width: 80%; height: 350rpx; margin: 40rpx auto; border-radius: 25rpx; border: solid 1px #CCCCCC;">
				<view style="line-height: 300rpx; width: 30%; height: 100%;">
					<icon style="font-size: 100rpx; color: #95A3AB; line-height: 350rpx;" class="icon-yonghu iconfont"></icon>
				</view>
				<view style="line-height: 300rpx; width: 70%; text-align: left; height: 100%;">
					<text style="color: #95A3AB; line-height: 350rpx;">请拍摄身份证正面</text>
				</view>
			</view>
			<view v-else @tap="chooseIdentity" style="text-align: center; line-height: 350rpx; width: 80%; height: 350rpx; margin: 40rpx auto; border-radius: 25rpx;">
				<image :src="identitySrc" style="width: 100%; height: 100%; border-radius: 25rpx;"></image>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="姓名" @changeValue="changeName" :value="name"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="身份证" @changeValue="changeIdentity" :value="identity"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="住址" @changeValue="changePaddress" :value="paddress"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="民族" @changeValue="changePnation" :value="pnation"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto; ">
				<view style="display: flex; width: 90%; margin: 0 auto;">
					<view style="line-height: 100rpx; width: 30%; font-size: 35rpx; color: #808080;">性别</view>
					<view @tap="changeSex(sexCurrent)" style="display: flex; position: relative; margin: 10rpx; border-radius: 40rpx; width: 200rpx; height: 80rpx; background-color: #C8C7CC;">
						<view :class="tagClass" style="position: absolute; text-align: center; font-size: 20rpx; height: 80rpx; width: 110rpx;background-color: #02C9FC;line-height: 60rpx; border-radius: 40rpx;"></view>
						<view style="z-index: 1005; width: 110rpx; text-align: center;">
							<text :style="'color: '+sColor+' ;'" style=" font-weight: 800; font-size: 30rpx; line-height: 80rpx;">男</text>
						</view>

						<view style="z-index: 1005; width: 110rpx; text-align: center; transform: translate(-20rpx 0);">
							<text :style="'color: '+rColor+' ;'" style="font-weight: 800; font-size: 30rpx; line-height: 80rpx;">女</text>
						</view>

					</view>
				</view>
				<view style="height: 1px; background-color: #9EABB2; width: 100%; margin: 0 auto;"></view>
			</view>
			<view @tap="toNext" class="button">
				<icon style="line-height: 130rpx; font-size: 40rpx; transform: rotate(-45deg); color: #FFFFFF; font-weight: 1000;"
				 class="icon-jiantou iconfont"></icon>
			</view>
		</view>
	</view>
</template>

<script>
	import registerInput from "@/components/ui/myRegisterInput.vue"
	import evenRadio from "../../components/evan-radio/evan-radio.vue"
	import evenRadioGroup from "../../components/evan-radio-group/evan-radio-group.vue"
	export default {
		components: {
			registerInput,
			evenRadio
		},
		data() {
			return {
				pnation: '',
				password: '',
				okword: '',
				tagClass: '',
				name: '',
				phone: '',
				identitySrc: '',
				rColor: '#02C9FC',
				sColor: '#FFFFFF',
				paddress: '',
				identity: '',
				sexCurrent: 0,
				sex: ['女', '男'],
				page: 0,
				psex: '女',
				oneClass: 'oneIn',
				twoClass: 'initial',
				index: 0,
				content: [{
						"id": 1,
						"name": "东华门街道办事处",
						"townId": "110101001000",
						"countyId": "110101000000"
					},
					{
						"id": 2,
						"name": "景山街道办事处",
						"townId": "110101002000",
						"countyId": "110101000000"
					},
					{
						"id": 3,
						"name": "交道口街道办事处",
						"townId": "110101003000",
						"countyId": "110101000000"
					},
					{
						"id": 4,
						"name": "安定门街道办事处",
						"townId": "110101004000",
						"countyId": "110101000000"
					},
					{
						"id": 5,
						"name": "北新桥街道办事处",
						"townId": "110101005000",
						"countyId": "110101000000"
					},
					{
						"id": 6,
						"name": "东四街道办事处",
						"townId": "110101006000",
						"countyId": "110101000000"
					},
					{
						"id": 7,
						"name": "朝阳门街道办事处",
						"townId": "110101007000",
						"countyId": "110101000000"
					},
					{
						"id": 8,
						"name": "建国门街道办事处",
						"townId": "110101008000",
						"countyId": "110101000000"
					},
					{
						"id": 9,
						"name": "东直门街道办事处",
						"townId": "110101009000",
						"countyId": "110101000000"
					},
					{
						"id": 10,
						"name": "和平里街道办事处",
						"townId": "110101010000",
						"countyId": "110101000000"
					},
					{
						"id": 11,
						"name": "前门街道办事处",
						"townId": "110101011000",
						"countyId": "110101000000"
					},
					{
						"id": 12,
						"name": "崇文门外街道办事处",
						"townId": "110101012000",
						"countyId": "110101000000"
					},
					{
						"id": 13,
						"name": "东花市街道办事处",
						"townId": "110101013000",
						"countyId": "110101000000"
					},
					{
						"id": 14,
						"name": "龙潭街道办事处",
						"townId": "110101014000",
						"countyId": "110101000000"
					},
					{
						"id": 15,
						"name": "体育馆路街道办事处",
						"townId": "110101015000",
						"countyId": "110101000000"
					},
					{
						"id": 16,
						"name": "天坛街道办事处",
						"townId": "110101016000",
						"countyId": "110101000000"
					},
					{
						"id": 17,
						"name": "永定门外街道办事处",
						"townId": "110101017000",
						"countyId": "110101000000"
					},
					{
						"id": 18,
						"name": "西长安街街道办事处",
						"townId": "110102001000",
						"countyId": "110102000000"
					},
					{
						"id": 19,
						"name": "新街口街道办事处",
						"townId": "110102003000",
						"countyId": "110102000000"
					},
					{
						"id": 20,
						"name": "月坛街道办事处",
						"townId": "110102007000",
						"countyId": "110102000000"
					}
				]
			}
		},
		computed: {
			// 计算属性的 getter
			isOne: {
				get: function() {

					return this.page
				},
				set: function(newDate) {

					if (newDate == 0) {
						this.oneClass = 'oneIn'
						this.twoClass = 'oneOut'
					} else {
						this.oneClass = 'oneOut'
						this.twoClass = 'oneIn'
					}
					setTimeout(() => {
						this.page = newDate
					}, 2000)
				}
			}
		},
		methods: {
			changePass(e) {
				this.password = e.detail.value
			},
			changeOkPass(e) {
				this.okword = e.detail.value
			},
			changeName(e) {
				this.name = e
			},
			changePhone(e) {
				this.phone = e.detail.value
			},
			async register() {
				var that = this
				var data = {
					"townId": that.content[that.index].townId,
					"villageId": that.content[that.index].countyId,
					"username": that.identity,
					"nickName": that.name,
					"cardNo": that.identity,
					"userAddress": that.paddress,
					"userPlace": that.paddress,
					"phone": that.phone,
					"password": that.password
				}

				if (that.password == that.okword && that.password != '') {
					var res = await that.$api.register({
						"townId": "341126100",
						"villageId": "34112610004",
						"username": "340404200003090614",
						"nickName": "关羽",
						"cardNo": "340404200003090614",
						"userAddress": "滁州市南谯区府城镇",
						"userPlace": "滁州市南谯区府城镇",
						"phone": "18855092047",
						"password": "123456"
					});
					console.log(res)
				} else {
					uni.showModal({
						title: '提示',
						content: '两次输入密码不一致',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

				console.log(data)
			},
			changeSex(sex) {
				if (sex == 0) {
					this.sexCurrent = 1
					this.tagClass = 'toRound'
					this.showTag = "圆形"
					this.sColor = "#02C9FC"
					this.rColor = "#FFFFFF"
				} else {
					this.sexCurrent = 0
					this.tagClass = 'toSquare'
					this.showTag = "圆形"
					this.rColor = "#02C9FC"
					this.sColor = "#FFFFFF"
				}
			},
			changePnation(e) {
				this.pnation = e
			},
			changeContent(e) {
				console.log(e.detail.value)
				this.index = e.detail.value
			},
			changePaddress(e) {
				this.paddress = e.detail.value
			},
			changeIdentity(e) {
				this.identity = e.newDate
			},
			test() {
				console.log(this.value)
			},
			toNext() {
				if (this.isOne == 0) {
					this.isOne = 1
					console.log(1)
				} else {
					this.isOne = 0
					console.log(2)
				}

			},
			chooseIdentity() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						that.identitySrc = res.tempFilePaths[0]
						uni.showLoading({
							title: '加载中'
						});
						//解析图片

						uni.uploadFile({
							url: 'http://192.168.78.107:8079/api/app/getIdCardInfoByPic/', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'pic',
							formData: {
								'user': 'test'
							},
							success: async (uploadFileRes) => {

								var data = JSON.parse(uploadFileRes.data).result;
								console.log(data);
								that.identity = data.pidcardnumber
								that.pnation = data.pnation
								that.paddress = data.paddress
								that.name = data.pname
								if (data.psex == '女') {
									that.changeSex(0)
								} else {
									that.changeSex(1)
								}
								uni.hideLoading();

								//获取街道
								var townList = await that.$api.getTown({
									"page": 0,
									"size": 9999,
									"enabled": true,
									"sort": "townId,asc",
									"countyId": ("341124000".split(0,6))[0]+'000'
								})
								
								that.content = townList.data.content
								
								console.log(townList)
							}
						});

					}
				});
			}
		}
	}
</script>

<style>
	.toSquare {
		animation: toRoundAni 0.2s;
		animation-fill-mode: forwards;
	}

	.toRound {

		animation: toSquareAni 0.2s;
		animation-fill-mode: forwards;
	}

	@keyframes toSquareAni {
		from {
			transform: translate(0rpx, 0);
		}

		to {
			transform: translate(90rpx, 0);
		}
	}

	@keyframes toRoundAni {
		from {
			transform: translate(90rpx, 0);
		}

		to {
			transform: translate(0rpx, 0);
		}
	}

	.initial {
		transform: translate(100%, 0);
	}

	.oneOut {
		animation: out 1.5s;
		animation-fill-mode: forwards;
	}

	.oneIn {
		animation: in 1.5s;
		animation-fill-mode: forwards;
	}

	@keyframes in {
		0% {
			transform: scale(0.9, 0.9) translate(100%, 0);
		}

		50% {
			transform: scale(0.9, 0.9) translate(0, 0);
		}

		100% {
			transform: scale(1, 1) translate(0, 0);
		}
	}

	@keyframes out {
		0% {
			transform: scale(1, 1) translate(0, 0);
		}

		50% {
			transform: scale(0.9, 0.9) translate(0, 0);
		}

		100% {
			transform: scale(0.9, 0.9) translate(-100%, 0);
		}
	}

	.button {
		background: linear-gradient(to right, #36A5FF, #02C9FC, #36A5FF);
		transform: rotate(45deg);
		animation: bgcChange 3s;
		animation-iteration-count: infinite;
		text-align: center;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin: 140rpx auto;
	}

	@keyframes bgcChange {
		0% {}

		100% {
			background-position: 130rpx 0;
		}
	}
</style>
